import DefaultTheme from "vitepress/theme";
import "./style/index.css"; //引入自定义的样式
import { inBrowser } from "vitepress";
import busuanzi from "busuanzi.pure.js";
import Confetti from "./components/Confetti.vue";
import DataPanel from "./components/DataPanel.vue";
import backtotop from "./components/backtotop.vue"
import { h } from 'vue'
import mediumZoom from 'medium-zoom';
import { onMounted, watch, nextTick } from 'vue';
import { useRoute } from 'vitepress';
import update from "./components/update.vue"
import ArticleMetadata from "./components/ArticleMetadata.vue"
import { useLive2d } from 'vitepress-theme-website'

export default {
  extends: DefaultTheme,
  Layout() { 
		return h(DefaultTheme.Layout, null, {
			'doc-footer-before': () => h(backtotop), // 使用doc-footer-before插槽
		})
	},
  // ...DefaultTheme, //或者这样写也可
   enhanceApp({ app, router }) {
    app.component("DataPanel", DataPanel);//注册全局组件
	app.component("Confetti", Confetti); //注册全局组件
	app.component('update' , update);//注册全局组件
	app.component('ArticleMetadata' , ArticleMetadata);//注册全局组件
    if (inBrowser) {
      router.onAfterRouteChanged = () => {
        busuanzi.fetch();
      };
    }
  },
  setup() {
      const route = useRoute();
      const initZoom = () => {
        // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); // 默认
        mediumZoom(".main img", { background: "var(--vp-c-bg)" }); // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
      };
      onMounted(() => {
        initZoom(); 
      }); 
      watch(  
        () => route.path,
        () => nextTick(() => initZoom())
      );
	   //看板娘
    useLive2d({
      enable: true,
      model: {
        url: 'https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/hibiki/hibiki.model.json'
      },
      display: {
        position: 'right',
        width: '135px',
        height: '300px',
        xOffset: '35px',
        yOffset: '5px'
      },
      mobile: {
        show: true
      },
      react: {
        opacity: 0.8
      }
    })
    },
};
